<template>
    <div class="box">
        <div class="elm">
            <span @click="$router.go(-1)"><van-icon name="arrow-left" />我的收藏</span>
            <span class="label">
                <div>
                    <van-icon name="ellipsis" />
                </div>
                <span>|</span>
                <div>
                    <van-icon name="close" />
                </div>
            </span>
        </div>
        <div class="shopp" v-for="(item, index) in $store.state.collectList" :key="index" @click="$router.push('/detailed/' + item.mtWmPoiId)">
            <div class="leftbox">
                <img :src="item.info&&item.info.head_pic_url" alt="">
            </div>
            <div class="rightbox">
                <div class="name">{{ item.info&&item.info.name }}</div>
                <div style="color: #ff6300;">
                    <van-icon name="star" />{{ item.info&&item.info.wmPoiScore }} {{ item.monthSalesTip }}
                </div>
                <div class="num">
                    <div>{{ item.info&&item.info.minPriceTip }} {{ item.info&&item.info.shippingFeeTip }}</div>
                    <div>{{ item.info&&item.info.deliveryTimeTip }} {{ item.info&&item.info.distance }}</div>
                </div>
            </div>
        </div>
        <div v-if="$store.state.collectList.length==0" class="empty">
            <p>收藏列表为空，您可以去<span style="color:red" @click="$router.push('./index/home')">逛逛！</span></p>
        </div>
    </div>
</template>

<script>
export default {
   
}
</script>

<style lang="scss" scoped>
.box{
    .elm {
    width: 95%;
    margin: 0 2.5%;
    display: flex;
    justify-content: space-between;
    margin-top: 30px;

    .name {
        color: black;
    }

    .label {
        // width: 60px;
        height: 30px;
        border: 1px solid #bdbdbd;
        border-radius: 30px;
        display: flex;
        span{
            color: #bdbdbd;
            line-height: 30px;
        }
        div {
            margin: 2px 6px;
            color: rgb(13, 110, 206);
            line-height: 30px;
        }
    }
   
    }
}
.shopp {
    display: flex;
    justify-content: space-between;
    width: 95%;
    margin: 4px 2.5%;
}

.shopp .leftbox {
    width: 80px;
    height: 80px;
}

.shopp .leftbox img {
    width: 100%;
}

.shopp .rightbox .num {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
}

.shopp .rightbox .favorable div {
    float: left;
    border: 1px solid #ec8375;
    margin: 1px 3px;
    color: #bd776e;
}

.shopp .rightbox {
    text-align: left;
    width: 253px;
}
.empty {
     margin: 100px 2.5%;
     text-align: center;
     font-size: 22px;
 }
</style>